<template>
  <div class="order">
    <div class="headerver">
      <router-link to="/">
        <a-icon type="left"
                class="icon" />
      </router-link>
      <div class="ver">
        <span>版本号:&nbsp;&nbsp;1.1.0</span>
        <span>设备号:&nbsp;&nbsp;100000000000000000</span>
      </div>
    </div>
    <div class="delivery-time address">
      <p>网络设置</p>
      <p>{{basicSetup.networkSetting}}</p>
    </div>
    <div class="delivery-time address">
      <p>设置频率</p>
      <p>{{basicSetup.settingFrequency}}</p>
    </div>
    <div class="delivery-time detail-main"
         style="clear: both;">
      <div class="verRight">
        <p>床位设置</p>
        <div class="binding floatLeft"
             @click="unbindingNo">解绑</div>
        <div class="binding floatLeft marginRight"
             @click="bindingNo">绑定</div>
      </div>
      <div class="first-aid">
        <div class="versionList"
             ref="Listscroll">
          <div v-for="(item, index) in versionData"
               :key="item.id"
               class="verli"
               @click="handlerLeftName(item.dp_id, item.bed_no, index)"
               :class="{'ChangeColor': bedIndex === index}"
               :id="item.id">{{item.dp_name}}</div>
        </div>
        <ul ref="Ulscroll">
          <li v-for="(item, index) in showList.action_Bed_no_list"
              :key="index"
              @click="handlerRightNo(showList.bed_no, item, index)"
              :class="{'active': nowIndex===index}">{{item}}</li>
        </ul>
      </div>
    </div>
    <div class="BindHint"
         v-if="shadeShow">
      <div class="shade"></div>
      <div class="pop-tit">
        <span> 提示</span>
        <img src="../../../static/images/version/quitBtn.png"
             alt="请等待"
             @click="decisionCan">
      </div>
      <div class="hint">
        <span>{{Promes.hint}}</span>
        <span>{{Promes.bedNum}}</span>
      </div>
      <div class="decision">
        <span class="con"
              @click="decisionCon(Promes.status)">确定</span>
        <span class="can"
              @click="decisionCan">取消</span>
      </div>
    </div>
    <div class="success"
         v-if="successB">
      <img :src="Promes.whetherImg"
           alt="请等待">
    </div>
    <div class="network"
         v-if="networkError">
      <span>
        您的网络走丢啦！请检查您的网络再试
      </span>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import urls from '../../common.js'
import { mapState } from 'vuex' // mapState vuex 辅助函数
import Bus from '../../../bus.js'
export default {
  name: 'headerver',
  data () {
    return {
      nowIndex: 0,
      bedIndex: 0,
      shadeShow: false,
      successB: false,
      basicSetup: {},
      Promes: '', // 提示框文本内容
      versionData: [], // 右侧病区名称
      showList: [], // 左侧床号列表
      initWardName: '', // 初始病区名称
      initWardBedNum: '', // 病区对应初始床号
      sliceNo: '', // 获取床截取后的床号
      dpId: '',
      networkError: false
    }
  },
  components: {},
  methods: {
    // 获取系统设置
    setting () {
      axios.get(urls.setting)
        .then((resolve) => {
          if (resolve.data.code === '200') {
            let setingData = resolve.data.data
            this.basicSetup = setingData
          }
        }, (reject) => {
          this.networkError = true
        })
    },
    // 查询所有的病区名称
    queryBedName () {
      axios.get(urls.queryBedName)
        .then((resolve) => {
          if (resolve.data.code === '200' && resolve.data.data) {
            let wardNameData = resolve.data.data
            this.versionData = wardNameData
            // 调用queryBedInf初始默认右侧第一个病区名床号
            this.initWardBedNum = wardNameData[0].bed_no
            // 初始默认第一个病区的第一个床号
            this.dpId = wardNameData[0].dp_id
            this.queryBedInfo(wardNameData[0].dp_id)
          }
        })
    },
    // 查询每个病区的床位信息
    queryBedInfo (dpId) {
      axios.get(urls.queryBedInfo + '?id=' + dpId)
        .then((resolve) => {
          if (resolve.data.code === '200' && resolve.data.data) {
            let BedInfo = resolve.data.data
            this.showList = BedInfo
            // 拼接完整床位号
            this.initWardBedNum = BedInfo.bed_no + BedInfo.action_Bed_no_list[0]
            this.dpId = BedInfo.bed_no
            this.sliceNo = BedInfo.action_Bed_no_list[0]
            // 将完整的床位号保存到本地
          }
        })
    },
    // 查看床位有无绑定绑定
    whetherBindNum (bedNo) {
      const Qs = require('qs')
      // 此处有坑 json 提交转form表单提交 用nodejs Qs方法
      return axios.post(urls.queryBedBdStatus, Qs.stringify({ bedNo: bedNo || localStorage.getItem('dpId') }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          }
        }
      )
        .then((res) => {
          if (res.data.code === '200') {
            let bedNo = res.data.data
            return bedNo
          } else {
            this.$message.error('绑定失败请确认床位号')
          }
        })
    },
    //  绑定状态值+1
    bdBed (dpId, bedNo) {
      axios.post(urls.bdBed, { dp_id: dpId || localStorage.getItem('dpId'), bed_no: bedNo || localStorage.getItem('WardBedNum') })
        .then((resolve) => {
          if (resolve.data.code === '200' && resolve.data.data) {
            let statusVal = resolve.data.data
            if (statusVal === 1) {
              this.$store.dispatch('changeBedNo', this.initWardBedNum || localStorage.getItem('WardBedNum'))
              this.successB = true
              setTimeout(() => {
                this.successB = false
                // 返回首页 name为 路由中的name值 也可以直接写路径
                this.$router.push({ name: 'hoshome' })
              }, 500)
            } else {
              this.$message.error('绑定失败请确定床位号')
            }
          }
        })
    },
    // 绑定状态值-1
    RebdBed (dpId, bedNo) {
      axios.post(urls.RebdBed, { dp_id: dpId || localStorage.getItem('dpId'), bed_no: bedNo || localStorage.getItem('WardBedNum') })
        .then((resolve) => {
          if (resolve.data.code === '200' && resolve.data.data) {
            this.successB = true
            this.initWardBedNum = ''
            this.$store.dispatch('changeBedNo', this.initWardBedNum)
            localStorage.setItem('WardBedNum', '')
            this.$router.push({ name: 'hoshome' })
            setTimeout(() => {
              this.successB = false
            }, 500)
          }
        })
    },
    // 选中左侧侧病区名称
    handlerLeftName (dpId, bedNo, index) {
      this.bedIndex = index
      this.queryBedInfo(dpId)
      localStorage.setItem('Listscroll', this.$refs.Listscroll.scrollTop)
      // this.$refs.Listscroll.scrollTop = 1000
    },
    // 选中右侧要绑定的床位号
    handlerRightNo (dpId, bedNo, index) {
      this.nowIndex = index
      this.initWardBedNum = dpId + bedNo
      this.dpId = dpId
      this.sliceNo = bedNo
    },
    // 点击绑定查看是否已经绑定
    bindingNo () {
      let bindStatus = this.whetherBindNum(this.initWardBedNum || localStorage.getItem('WardBedNum'))
      bindStatus.then((res, rej) => {
        if (res > 0) {
          this.Promes = {
            hint: '此床位已经被其它设备绑定，确定要绑定:',
            bedNum: this.sliceNo + '吗?',
            whetherImg: require('../../../static/images/version/Success.png'),
            status: 0
          }
          this.shadeShow = true
        } else {
          localStorage.setItem('WardBedNum', this.initWardBedNum)
          localStorage.setItem('dpId', this.dpId)
          this.bdBed(this.dpId, this.initWardBedNum)
          this.Promes = {
            whetherImg: require('../../../static/images/version/Success.png')
          }
        }
      })
    },
    // 点击解绑 查看是否绑定 已绑定就成功解绑， 否则让其绑定
    unbindingNo () {
      let unbindStatus = this.whetherBindNum(this.initWardBedNum || localStorage.getItem('WardBedNum'))
      unbindStatus.then((res, rej) => {
        if (res > 0) {
          this.Promes = {
            hint: '此床位已经被其它设备绑定，确定要解除绑定:',
            bedNum: this.sliceNo + '吗?',
            whetherImg: require('../../../static/images/version/unbind.png'),
            status: 1
          }
          this.shadeShow = true
        } else {
          this.Promes = {
            hint: '此床位还未绑定,请您先去绑定',
            status: 2
          }
          this.shadeShow = true
        }
      })
    },
    // 确定按钮事件
    decisionCon (stu) {
      this.$store.commit('ScrollValue', {
        leftScroll: localStorage.getItem('Listscroll'),
        Ulscroll: localStorage.getItem('Ulscroll')
      })
      localStorage.setItem('WardBedNum', this.initWardBedNum)
      localStorage.setItem('dpId', this.dpId)
      localStorage.setItem('Ulscroll', this.$refs.Ulscroll.scrollTop)
      if (stu === 0) {
        this.$store.dispatch('changeBedNo', localStorage.getItem('WardBedNum'))
        this.bdBed(this.dpId, this.initWardBedNum)
        this.shadeShow = false
      } else if (stu === 1) {
        this.shadeShow = false
        this.RebdBed(this.dpId, this.initWardBedNum)
      } else if (stu === 2) {
        this.shadeShow = false
      }
    },
    // 取消按钮事件
    decisionCan () {
      this.shadeShow = false
    },
    // 返回上一页
    goBack () {
      this.$router.go(-1)
    }
  },
  mounted () {
    this.setting()
    this.queryBedName()
    Bus.$on('ScrollHandler', (val) => {
      // console.log(localStorage.getItem('Listscroll'))
      // let scrollObj = JSON.stringify(val)
      // console.log(scrollObj)
      // this.$refs.Listscroll.scrollTop = 800
      // this.$refs.Ulscroll.scrollTop = 400
    })
  },
  computed: {
    ...mapState({ //  将 store 中值进行映射 放在需要渲染值的页面 {{this.'属性名'}}
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../static/css/color.styl';

.order {
  position: relative;
  background-color: $color-version;
  height: 100%;
}

.BindHint {
  width: 4.8rem;
  height: 4.05rem;
  position: absolute;
  background-color: #f8f8f8;
  border-radius: 0.12rem;
  overflow: hidden;
  top: 50%;
  left: 50%;
  margin: -2.025rem 0 0 -2.4rem;

  .shade {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }

  .pop-tit {
    position: relative;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f8f8;
    z-index: 2;

    span {
      font-size: 0.3rem;
      color: #1c1c1c;
      vertical-align: middle;
      font-weight: bold;
    }

    img {
      width: 0.28rem;
      position: absolute;
      top: 0;
      right: 0.3rem;
      margin: 0.3rem 0;
    }
  }

  .hint {
    position: relative;
    height: 1.8rem;
    line-height: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    background: #f8f8f8;
    color: #1c1c1c;

    // display: table;
    span {
      display: block;
      padding: 0 0.2rem;
      text-align: center;
      // vertical-align: middle;
    }

    span:nth-child(1) {
      text-align: left;
    }
  }

  .decision {
    position: relative;
    height: 1.5rem;
    text-align: center;
    background: #f8f8f8;
    z-index: 2;

    span {
      display: inline-block;
      height: 0.7rem;
      width: 2.1rem;
      line-height: 0.7rem;
      border-radius: 10px;
      margin: 0.4rem 0;
    }

    .con {
      color: #fff;
      background-color: #27ae9e;
    }

    .can {
      color: #1c1c1c;
      background-color: #e6e6e6;
    }
  }
}

.success {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.8rem;
  height: 2.8rem;
  // transform: translateX(-50%);
  // transform: translateY(-50%)
  margin: -1.4rem -1.4rem;

  img {
    width: 2.8rem;
  }
}

.headerver {
  height: 0.98rem;
  background-color: $color-main;
  text-align: justify;
  line-height: 0.98rem;
  padding-left: 0.3rem;
  color: $color-white;
  margin-bottom: 0.3rem;

  .icon {
    font-size: 0.36rem;
    color: $color-white;
    vertical-align: -0.23em;
  }

  .ver {
    float: right;
    margin-right: 0.3rem;
    font-size: 0.24rem;

    span {
      &:nth-of-type(1) {
        margin-right: 0.6rem;
      }
    }
  }
}

.delivery-time {
  width: 18.6rem;
  background-color: $color-white;
  margin: 0.3rem auto;
  font-size: 0.28rem;
  padding: 0.2rem 0.3rem;
  box-shadow: 0 0.04rem 0.12rem 0 rgba(127, 135, 143, 0.1);
  border-radius: 0.06rem;
}

.address {
  height: 1.1rem;

  p {
    &:nth-of-type(1) {
      font-size: 0.26rem;
      color: $color-versionfont1;
      border-left: 0.04rem solid $color-versionbg;
      padding-left: 0.08rem;
      color: #161d26;
      font-weight: bold;
    }

    &:nth-of-type(2) {
      margin-top: 0.2rem;
      color: $color-versionfont;
      font-size: 0.24rem;
      padding-left: 0.12rem;
    }
  }
}

.detail-main {
  height: 59%;

  .verRight {
    text-align: center;
    height: 0.8rem;
    width: 18rem;

    p {
      font-size: 0.26rem;
      color: $color-health;
      border-left: 0.04rem solid $color-versionbg;
      padding-left: 0.08rem;
      float: left;
      font-weight: bold;
      color: #161d26;
    }

    .binding {
      width: 1.5rem;
      height: 0.6rem;
      line-height: 0.6rem;
      border: 1px solid $color-main;
      border-radius: 0.08rem;
      color: $color-main;
      font-size: 0.3rem;
    }

    .floatLeft {
      float: right;
    }

    .marginRight {
      margin-right: 0.2rem;
      background-color: $color-main;
      color: $color-white;
    }
  }

  .first-aid {
    border: 1px solid rgb(232, 233, 238);
    border-bottom: none;
    border-left: none;
    clear: both;
    overflow: hidden;

    .versionList {
      float: left;
      width: 2.97rem;
      background-color: #edeef0;
      text-align: center;
      max-height: 3.15rem;
      overflow-y: auto;

      .ChangeColor {
        background: #27ae9e;
      }

      .verli {
        height: 0.63rem;
        line-height: 0.63rem;
        font-size: 0.24rem;
        color: $color-health;
        border-bottom: 1px solid rgb(232, 233, 238);
      }
    }

    ul {
      width: 15rem;
      float: right;
      height: 3.15rem;
      overflow-y: scroll;

      li {
        height: 0.63rem;
        width: 15rem;
        border-bottom: 1px solid rgb(232, 233, 238);
        padding-left: 2.8rem;
        line-height: 0.63rem;
        font-size: 0.2rem;
        color: $color-versionfont1;
      }

      .active {
        background-color: #f5f5f5;
      }
    }
  }
}

.network {
  position: absolute;
  left: 50%;
  top: 40%;
  color: #27ae9e;
  transform: translateX(-50%);
}
</style>
